<template>
  <div class="category">
    <div class="banxin">
      <div class="head">
        <!--        <div class='all'>全部结果</div>-->
        <!--        <i class="el-icon-arrow-right" />-->
        <!--        <div class='keyword'>{{classifyName}}</div>-->
        <!--         <i v-if="classifyName" class="el-icon-arrow-right" />-->
      </div>
      <!--      <img class="banner" v-if="classifyBanner !== ''" :src="classifyBanner" alt="">-->
      <div class="content">
        <!--        <div class='sort'>-->
        <!--          <div>排序：</div>-->
        <!--          <div class='default' :class="index=='1'?'active':''" @click="defaultSort()">默认</div>-->
        <!--          <div class='price' :class="index=='2'?'active':''" @click="priceSort()">-->
        <!--              价格-->
        <!--              <div class='arr'>-->
        <!--                <div class='up' :class="type==1?'low':''"></div>-->
        <!--                <div class='down' :class="type==2?'high':''"></div>-->
        <!--              </div>-->
        <!--          </div>-->
        <!--          <div class='sales' :class="index=='3'?'active':''" @click="salesSort()">-->
        <!--              销量-->
        <!--              <div class='arr'>-->
        <!--                <div class='up' :class="index=='3' && volume==1?'low':''"></div>-->
        <!--                <div class='down' :class="index=='3' && volume==2?'high':''"></div>-->
        <!--              </div>-->
        <!--          </div>-->
        <!--        </div>-->
        <div class="proList" v-loading="loading">
          <div v-if="noProduct==false">
            <!--              <h3 style="margin-bottom:80px;margin-top:50px;">{{classifyName}}</h3>-->
            <ProductList :productList="productList" />
          </div>
          <div v-else class="noproduct">
            <svg-icon style="width: 240px; height: 240px; margin-bottom: 20px;" name="user-order-nodata" />
            <p class="fs20 font-color-999">该分类没有商品～</p>
          </div>
        </div>
        <el-pagination
          :hide-on-single-page="true"
          :current-page="page"
          :page-size="12"
          @current-change="handleCurrentChange"
          background
          layout="prev, pager, next" :total="total" />
      </div>
    </div>
  </div>
</template>
<script setup>
import ProductList from '@/components/base/productList'
import {
  getCanvasProducts
} from '@/api/product.js'
import { onMounted, ref } from 'vue'
import { useRoute } from 'vue-router'
import SvgIcon from '@/components/svgIcon/index.vue';
const page = ref(1)
const index = ref('1')
const type = ref('')
const volume = ref('')
const total = ref(0)
const sourceType = ref('')
const ids = ref([])
const classifyId = ref(0)
const noProduct = ref(false)
const productList = ref([])
const loading = ref(false)

const route = useRoute()
onMounted(()=>{
  sourceType.value = route.query.sourceType
  ids.value = route.query.ids
  classifyId.value = route.query.classifyId
  handleGetCanvasProducts()
})

// 获取分类商品
async function handleGetCanvasProducts () {
  loading.value = true
  let params = {
    page: page.value,
    pageSize: 12
  }
  if (sourceType.value === '1') {
    if (ids.value && ids.value.length > 0) {
      params.ids = ids.value
    } else {
      list.value = []
    }
  } else if (sourceType.value === '2') {
    if (classifyId.value) {
      params.classifyId = classifyId.value
    } else {
      list.value = []
    }
  }
  const response = await getCanvasProducts(params)
  const res = response.data
  if (res.code === '200') {
    // console.log(res)
    productList.value = res.data.list
    total.value = parseInt(res.data.total)
    if (res.data.list.length < 1) {
      noProduct.value = true
    } else {
      noProduct.value = false
    }
    loading.value = false
  } else {
    ElMessage({
      message: res.message,
      type: 'warning'
    })
  }
}

// 分页器跳转
function handleCurrentChange (val) {
  page.value = val
  handleGetCanvasProducts()
}

// 默认排序
function defaultSort () {
  type.value = ''
  volume.value = ''
  index.value = '1'
  page.value = 1
  handleGetCanvasProducts()
}

// 价格排序
function priceSort () {
  if (type.value !== 1) {
    type.value = 1
  } else {
    type.value = 2
  }
  page.value = 1
  volume.value = ''
  index.value = '2'
  handleGetCanvasProducts()
}

// 销量排序
function salesSort () {
  if (volume.value !== 1) {
    volume.value = 1
  } else {
    volume.value = 2
  }
  page.value = 1
  type.value = ''
  index.value = '3'
  handleGetCanvasProducts()
}
</script>
<style lang="scss" scoped>
.category{
    width: 100%;
  height: 100%;
  background-color: #f0f0f0;
  padding-bottom: 143px;
  text-align: center;
  .banxin {
    width: 1252px;
    height: 100%;
    margin: 0 auto;
    .head {
      width: 100%;
      height: 64px;
      line-height: 64px;
      font-size: 16px;
      display: flex;
      align-items: center;
      .all {
        margin-right: 20px;
      }
      .keyword {
        margin: 0 20px;
        color: #C83732;
      }
    }
    .banner{
        width: 100%;
        height: 356px;
        margin-bottom: 25px;
    }
    .content{
      background-color: #FFFFFF;
      width: 100%;
      padding: 0 45px 30px;
      box-sizing: border-box;
      .sort {
        width: 100%;
        height: 63px;
        line-height: 27px;
        display: flex;
        align-items: center;
        border-bottom: 1px solid #f1f1f1;
        color: #666666;
        .default {
          margin-left: 20px;
          cursor: pointer;
        }
        .sales {
          display: flex;
          cursor: pointer;
          // img{
          //   width: 9px;
          //   height: 16px;
          //   vertical-align: middle;
          // }
        }
        .price {
          display: flex;
          margin: 0 20px;
          cursor: pointer;
        }
        .arr {
          vertical-align: middle;
          width: 12px;
          margin-left: 3px;
          .up {
            width: 0;
            height: 0;
            border: 6px solid transparent;
            border-bottom-color: #999999;
          }
          .down {
            width: 0;
            height: 0;
            border: 6px solid transparent;
            border-top-color: #999999;
            margin-top: 3px;
          }
        }
        .active{
          color: #C83732;
          .arr{
            .high{
              border-top-color: #C83732;
            }
            .low{
              border-bottom-color: #C83732;
            }
          }
        }
      }
      h3{
          font-size: 24px;
          font-weight: bold;
          margin-bottom: 30px;
      }
      .noproduct{
          width: 100%;
          text-align: center;
          padding: 200px 0;
      }
      :deep(.el-pagination){
        text-align: right;
        .el-pager{
          li:not(.disabled):hover{
            color: $mainGlod;
          }
          li:not(.disabled).active{
            background-color: $mainGlod;
          }
          li:not(.disabled).active:hover{
            color: #F4F4F5;
          }
        }
      }
    }
  }
  .proList{
    padding-top: 50px;
    min-height: 500px;
  }
}
</style>
